<template>
	<view class="register" @click="countdown">
		<view class="status_bar_h" :style="{
				height: `${statusBarHeight}px`,
				backgroundColor: '#39B19D',
			}"></view>
		<view class="img_box">
			<!-- <swiper
				style="height: 400rpx"
				circular
				:indicator-dots="false"
				:autoplay="true"
				:interval="2000"
				:duration="500">
				<swiper-item
					v-for="(item, key) in src"
					:key="key">
					<view class=""
						><image
							style="width: 100%; height: 400rpx"
							mode="aspectFill"
							:src="item"></image
					></view>
				</swiper-item>
			</swiper> -->
			<image style="width: 100%; height: 400rpx" mode="aspectFill" :src="src">
			</image>
			<view class="back" @click="back">
				<image src="/static/images/arrow-left.png" mode="widthFix"></image>
				<text>返回</text>
			</view>
		</view>
		<view class="main">
			<view class="title">ONE桌遊自助繳費系統</view>
			<view class="sd_title">登入</view>
			<view class="form">
				<view class="user_name">
					<up-input v-model="form.user_name" type="number" color="#39B19D" shape="circle" :customStyle="{
							border: '2rpx solid #39B19D!important',
						}" placeholder="請輸入10位電話號碼">
						<template #prefix>
							<up-text text="+886" color="#39B19D"></up-text>
						</template>
					</up-input>
				</view>
				<view class="user_pass" v-if="!show">
					<up-input v-model="form.user_pass" type="password" color="#39B19D" shape="circle" :customStyle="{
							border: '2rpx solid #39B19D!important',
						}" placeholder="請輸入登入密碼"></up-input>
				</view>
				<view class="user_pass" v-else>
					<up-input v-model="form.user_pass" type="number" color="#39B19D" shape="circle"
						@change="inputChange" :customStyle="{
							border: '2rpx solid #39B19D!important',
						}" placeholder="請輸入手機驗證碼">
						<template #suffix>
							<up-code ref="uCodeRef" seconds="20" changeText="請60秒之後重新獲取"></up-code>
							<up-button @tap="getCode" text="獲取驗證碼" color="#39B19D" size="mini"></up-button>
						</template>
					</up-input>
				</view>
				<!-- <text class="checkout_btn" @click="jump('codeLogin')">切換驗證碼登入</text> -->
				<text class="checkout_btn" v-if="!show" @click="show=!show">切換驗證碼登入</text>
				<text class="checkout_btn" v-else @click="show=!show">切換密碼登入</text>
			</view>
			<view class="btn_wrap">
				<view class="btn_box" @click="submit">確定登入
				</view>
				<view class="btn_box" @click="jump('scanCode')">掃碼登入</view>
				<view class="btn_box" @click="jump('register')">註冊</view>
			</view>
			<view class="deal">
				<checkbox-group @change="checkboxChange">
					<label>
						<checkbox color="#39B19D" outline="#39B19D" class="deal_check" :checked="isChecked" />
						<text class="text">我已閱讀並同意《登入協議》《隱私協議》</text>
					</label>
				</checkbox-group>
			</view>
		</view>
	</view>
</template>

<script>
	import useStore from '@/store/index.js';
	import baseURL from '@/utils/baseURL.js';
	// import {
	// 	countDate
	// } from '@/utils/timeoutToIndex';
	export default {
		data() {
			return {
				src: [],
				baseURL,
				isChecked: false,
				disabled: false,
				changeText: '獲取驗證碼',
				form: {},
				statusBarHeight: 0, // 顶部状态栏高度
				bthHeight: 0, // 底部按钮高度
				list: [],
				scrollTop: 0,
				old: {
					scrollTop: 0,
				},
				show: false,
			};
		},
		onLoad() {
			this.statusBarHeight = uni.getSystemInfoSync().statusBarHeight;
			// const screenTop = uni.getSystemInfoSync().safeArea.top;
			// const screenBot = uni.getSystemInfoSync().safeArea.bottom;
			this.bthHeight = uni.getSystemInfoSync().screenHeight - (1000 - 40) / 2;
			// console.log('uni.getSystemInfoSync()', uni.getSystemInfoSync());
			// console.log('this.bthHeight', this.bthHeight);
			// console.log('screenTop', screenTop);
			// console.log('screenBot', screenBot);
			this.setSwiperImg();
			// const token = JSON.parse(uni.getStorageSync('token'))
			// 	? JSON.parse(uni.getStorageSync('token'))
			// 	: ''; // 1 店家 2商家
			// if (!token) {
			// 	uni.navigateTo({
			// 		url: '/pages/login/login',
			// 	});
			// } else {
			// }
			this.countdown();

			// this.form.user_name = '0975170840'
			// this.form.user_pass = '112233'
		},
		// onReady() {
		// 	this.countdown();
		// },
		methods: {
			countdown() {
				// countDate();
			},
			setSwiperImg() {
				const equipmentOptions = JSON.parse(
					uni.getStorageSync('equipmentOptions')
				);
				// console.log('equipmentOptions', equipmentOptions.imagejh);
				// const _src = equipmentOptions.imagejh ?
				// 	equipmentOptions.imagejh.split(',') : [];
				// if (_src.length > 1) {
				// 	this.src = _src.map(item => baseURL + item);
				// } else if (_src.length === 1) {
				// 	this.src = [baseURL + _src[0]];
				// }
				this.src = baseURL + equipmentOptions.image2
			},
			submit() {
				if (this.isChecked) {
					if (this.checkForm()) {
						// const params = {
						// 	mobile: this.form.user_name,
						// 	password: this.form.user_pass,
						// };
						let params

						if (!this.show) {
							params = {
								mobile: this.form.user_name,
								password: this.form.user_pass,
								token_id: '',
							}
						} else {
							params = {
								user_name: this.form.user_name,
								user_pass: this.form.user_pass,
								token_id: '',
							}
						}

						uni.request({
							url: baseURL + '/api/login/loginMobile',
							method: 'POST',
							data: {
								...params,
							},
							header: {
								'Content-Type': 'application/x-www-form-urlencoded',
							},
							sslVerify: false,
							success: res => {
								if (res.data.code == 0) {
									uni.showToast({
										title: res.data.msg,
										icon: 'none',
										duration: 2000,
									});
								} else {
									// 登录返回的data所有的值，除了上面的其他的从这里取值
									uni.setStorageSync(
										'userOptions',
										JSON.stringify(res.data.data)
									);
									uni.navigateTo({
										url: '/pages/shop/shop',
									});
								}
							},
							fail: res => {
								uni.showToast({
									title: res.data.msg,
									icon: 'none',
								});
							},
						});
					} else {
						uni.showModal({
							title: '系統提示',
							content: '請檢查是否填寫',
						});
					}
				} else {
					uni.showToast({
						title: '請勾選協議',
						duration: 1000,
					});
				}
			},
			checkForm() {
				const {
					user_name,
					user_pass
				} = this.form;
				return user_name && user_pass ? true : false;
			},
			jump(data) {
				let url = '';
				switch (data) {
					case 'register':
						url = '/pages/register/register';
						break;
					case 'codeLogin':
						// url = '/pages/menu/menu';
						break;
					case 'scanCode':
						url = '/pages/menu/menu';
						break;
					default:
				}
				uni.navigateTo({
					url
				});
			},
			checkboxChange(e) {
				this.isChecked = !this.isChecked;

			},
			getCode() {
				const params = {
					code_type: 'login',
					mobile: this.form.user_name
				};
				uni.request({
					url: baseURL + '/api/login/code',
					method: 'POST',
					data: {
						...params,
					},
					header: {
						'Content-Type': 'application/x-www-form-urlencoded',
					},
					success: res => {
						if (res.data.code == 0) {
							uni.showToast({
								title: res.data.msg,
								icon: 'none',
								duration: 2000,
							});
						} else {
							uni.showToast({
								title: res.data.msg,
								icon: 'success'
							})
						}
					},
					fail: res => {
						uni.showToast({
							title: res.data.msg,
							icon: 'none',
						});
					},
				});
			},
			back() {
				uni.reLaunch({
					url: '/pages/menu/menu'
				})
			}
		},
	};
</script>

<style lang="scss" scoped>
	.register {
		height: 100%;

		.img_box {
			// padding: 40rpx 40rpx 0;
			position: relative;

			.back {
				position: fixed;
				left: 10rpx;
				bottom: 30rpx;
				display: flex;
				align-items: center;
				color: #fff;
				background-color: #ff914d;
				padding: 5rpx 10rpx;
				border-radius: 20rpx;

				image {
					width: 50rpx;
					margin-right: 10rpx;
				}
			}
		}

		.main {
			padding: 40rpx 40rpx 0;
			text-align: center;
			color: #39B19D;

			.title {
				font-size: 36rpx;
			}

			.sd_title {
				height: 100rpx;
				line-height: 100rpx;
				font-size: 50rpx;
			}

			.form {
				position: relative;
				padding-bottom: 120rpx;

				.input {
					border: 2rpx solid #39B19D;
				}

				.input {
					border: 2rpx solid #39B19D;
				}

				.input:focus {
					border: 2rpx solid #39B19D;
				}

				.input:focus {
					border: 2rpx solid #39B19D;
				}

				.user_name {
					margin-bottom: 20rpx;
				}

				.user_code {
					margin-bottom: 20rpx;
				}

				.checkout_btn {
					position: absolute;
					right: 20rpx;
					bottom: 60rpx;
					font-size: 24rpx;
				}
			}

			.btn_wrap {
				display: flex;
				justify-content: space-around;

				.btn_box {
					width: 140rpx;
					padding: 10rpx;
					text-align: center;
					border-radius: 10rpx;
					color: #fff;
					background-color: #39B19D;
				}
			}

			.deal {
				padding: 20rpx 20rpx 20rpx;
				font-size: 24rpx;

				::v-deep .uni-checkbox-input {
					border-color: #39B19D;
					border-radius: 50%;
					vertical-align: middle;
				}

				.text {
					vertical-align: middle;
				}
			}
		}
	}
</style>